<template>
    <div class='cont'>
        <!-- <div style="color:#fff">{{count}}</div> -->
        <!-- 
            
            龙门吊
        
         -->
        <div class='lmd'>
            <img class='position-lmd1 position' v-show='lmd' src='../../assets/img/2.png' alt='' />
            <img class='position-lmd2 position' v-show='lmd' src='../../assets/img/2.png' alt='' />
            <img class='position-lmd3 position' v-show='lmd' src='../../assets/img/2.png' alt='' />
            <img class='position-lmd4 position' v-show='lmd' src='../../assets/img/2.png' alt='' />
        </div>

        <!--  喊话 -->
        <div class='hh'>
            <img class='position-hh1 position1' v-show='hh' src='../../assets/img/1.png' alt='' />
            <img class='position-hh2 position1' v-show='hh' src='../../assets/img/1.png' alt='' />
            <img class='position-hh3 position1' v-show='hh' src='../../assets/img/1.png' alt='' />
            <img class='position-hh4 position1' v-show='hh' src='../../assets/img/1.png' alt='' />
        </div>

        <!-- 监控视频 -->
        <div v-show='blockShow' class='play'>
            <div id='playWind' style=''></div>
            <img src='../../assets/img/tongzs/clo.png' style='position: absolute; top: 10px; right: 10px' alt=''
                 @click='clo()' />
        </div>

        <!-- 

    监控

 -->
        <!-- 监控 -->
        <div class='jk'>
            <img
                class='gt-pos-ab'
                style='top: 380px; left: 385px'
                v-show='jk'
                @click="showVideo('ezopen://open.ys7.com/F98655064/2.hd.live')"
                src='../../assets/img/3.png'
                alt=''
            />
            <img
                class='gt-pos-ab'
                style='top: 420px; left: 678px'
                v-show='jk'
                @click="showVideo('ezopen://open.ys7.com/F98655064/1.hd.live')"
                src='../../assets/img/3.png'
                alt=''
            />
            <img
                class='gt-pos-ab'
                style='top: 205px; left: 470px'
                v-show='jk'
                @click="showVideo('ezopen://open.ys7.com/F98655064/5.hd.live')"
                src='../../assets/img/3.png'
                alt=''
            />
            <img
                class='gt-pos-ab'
                style='top: 175px; left: 531px'
                v-show='jk'
                @click="showVideo('ezopen://open.ys7.com/F98655064/8.hd.live')"
                src='../../assets/img/3.png'
                alt=''
            />
            <img
                class='gt-pos-ab'
                style='top: 280px; left: 790px'
                v-show='jk'
                @click="showVideo('ezopen://open.ys7.com/F98655064/11.hd.live')"
                src='../../assets/img/3.png'
                alt=''
            />
            <img
                class='gt-pos-ab'
                style='top: 235px; left: 1000px'
                v-show='jk'
                @click="showVideo('ezopen://open.ys7.com/F98655064/10.hd.live')"
                src='../../assets/img/3.png'
                alt=''
            />
            <img
                class='gt-pos-ab'
                style='top: 180px; left: 1314px'
                v-show='jk'
                @click="showVideo('ezopen://open.ys7.com/F98655064/7.hd.live')"
                src='../../assets/img/3.png'
                alt=''
            />
            <img
                class='gt-pos-ab'
                style='top: 126px; left: 1485px'
                v-show='jk'
                @click="showVideo('ezopen://open.ys7.com/F98655064/9.hd.live')"
                src='../../assets/img/18.png'
                alt=''
            />
            <img
                class='gt-pos-ab'
                style='top: 500px; left: 1416px'
                v-show='jk'
                @click="showVideo('ezopen://open.ys7.com/F98655064/3.hd.live')"
                src='../../assets/img/18.png'
                alt=''
            />
            <img
                class='gt-pos-ab'
                style='top: 420px; left: 1198px'
                v-show='jk'
                @click="showVideo('ezopen://open.ys7.com/F98655064/4.hd.live')"
                src='../../assets/img/3.png'
                alt=''
            />
            <img
                class='gt-pos-ab'
                style='top: 193px; left: 725px'
                v-show='jk'
                @click="showVideo('ezopen://open.ys7.com/F98655064/6.live')"
                src='../../assets/img/18.png'
                alt=''
            />
            <!-- <img class="gt-pos-ab" style="top: 160px; left: 760px" v-show="jk" @click="showVideo()" src="../../assets/img/18.png" alt="" /> -->
            <!-- 东 -->
            <img
                class='gt-pos-ab'
                style='top: 258px; left: 1303px'
                v-show='jk'
                @click="showVideo('ezopen://open.ys7.com/F58891617/3.hd.live')"
                src='../../assets/img/3.png'
                alt=''
            />
            <img
                class='gt-pos-ab'
                style='top: 259px; left: 1430px'
                v-show='jk'
                @click="showVideo('ezopen://open.ys7.com/F58891617/4.hd.live')"
                src='../../assets/img/18.png'
                alt=''
            />
            <img
                class='gt-pos-ab'
                style='top: 263px; left: 1406px; width: 30px; height: 60px'
                v-show='jk'
                @click='showVideo()'
                src='../../assets/img/16.png'
                alt=''
            />
            <img
                class='gt-pos-ab'
                style='top: 266px; left: 1326px; width: 30px; height: 60px'
                v-show='jk'
                @click='showVideo()'
                src='../../assets/img/17.png'
                alt=''
            />
        </div>
        <!-- 喷淋系统-->
        <div class='plxt'>
            <div v-show='plxt' class='penlin'>
                <ul>
                    <li>喷淋开关记录</li>
                    <li v-for='(item, index) in penlinlshi' :key='index'>
                        {{ item ? item.time : '' }} {{ item.online ? '打开' : '关闭' }}
                    </li>
                </ul>
            </div>
            <img
                class='gt-pos-ab'
                style='top: 94px; left: 516px; z-index: 400'
                @click='penlinD()'
                @mouseleave='plxt = false'
                @mousemove='plxt = true'
                v-show='pl'
                src='../../assets/img/4.png'
                alt=''
            />
            <!-- // 制梁区喷淋 -->
            <img
                class='gt-pos-ab'
                style='top: 530px; left: 500px; z-index: 400'
                @click="penlinD('制梁区')"
                @mouseleave='plxt = false'
                @mousemove='plxt = true'
                v-show='pl'
                src='../../assets/img/4.png'
                alt=''
            />

            <div v-show='pll' class='statsDiv'>
                <span>制梁区喷淋</span>
                <br />
                <span>喷淋状态:{{ value == 'true' ? '打开' : '关闭' }}</span>
                <el-switch
                    active-value='true'
                    inactive-value='false'
                    v-model='regsValue'
                    style='position: relative; left: 20px'
                    @change='change1()'
                ></el-switch>
            </div>

            <!-- 存梁区喷淋 -->
            <img
                class='gt-pos-ab'
                style='top: 360px; left: 814px; z-index: 400'
                @click="penlinD('存梁区')"
                @mouseleave='plxt = false'
                @mousemove='plxt = true'
                v-show='pl'
                src='../../assets/img/4.png'
                alt=''
            />
            <!-- <div class="prop" v-show="clqShow" @mousemove="clqShow=false" @click="clqShow=false">
                
            </div> -->
            <div class='clqpl' v-show='clqShow'>
                <h2>存梁区喷淋</h2>
                <div class='clqpl1'>
                    <h3>台座总开关</h3>
                    <span style='margin-bottom: 10px'>自动喷淋启用</span>
                    <el-switch
                        v-model='mainSwitch[0].start_state'
                        @change='updateDataDp(mainSwitch[0].start_state, mainSwitch[0].start_variate)'
                        style='position: relative; left: 5px; margin-bottom: 10px'
                    ></el-switch>
                    <br />
                    <span style='margin-bottom: 10px'>停止喷淋</span>
                    <el-switch
                        v-model='mainSwitch[1].start_state'
                        @change='updateDataDp(mainSwitch[1].start_state, mainSwitch[1].start_variate)'
                        style='position: relative; left: 5px; margin-bottom: 10px'
                    ></el-switch>
                </div>
                <div class='clqplAll' v-for='(item, index) in mainTz' :key='index'>
                    <span style='margin-bottom: 10px'>{{ item.pedestal }}状态{{ item.start_state ? '开启' : '关闭' }}</span>
                    <el-switch
                        @change='updateDataDp(item.continue_state, item.continue_variate)'
                        v-model='item.continue_state'
                        style='position: relative; left: 5px'
                    ></el-switch>
                </div>
            </div>

            <img class='position-pl555 gt-pos-ab' v-show='pl' src='../../assets/img/green.png.png'
                 @click='clqShow = false' alt='' />
        </div>
        <!-- <img class="position-pl4  " v-show="pl" src="../../assets/img/19.png" alt=""> -->
        <!-- 车辆定位-->
        <div class='car'>
            <img class='position-cl gt-pos-ab' @click="go('/cldw')" v-show='cl' src='../../assets/img/5.png' alt='' />
            <div id='container' v-show='cldw' style='width: 1200px; height: 600px'></div>
        </div>
        <!-- 配电柜-->
        <div class='pdg'>
            <div class='pdgDiv' v-show='pdgDiv'></div>
            <img
                class='position-pd1 gt-pos-ab'
                @mouseleave='pdgDiv = false'
                @mousemove='pdgDiv = true'
                v-show='pd'
                src='../../assets/img/6.png'
                alt=''
            />
            <img
                class='position-pd2 gt-pos-ab'
                @mouseleave='pdgDiv = false'
                @mousemove='pdgDiv = true'
                v-show='pd'
                src='../../assets/img/6.png'
                alt=''
            />
        </div>

        <!-- 提梁机-->
        <img class='position-tl1 gt-pos-ab' v-show='tl' src='../../assets/img/7.png' alt='' />
        <img class='position-tl2 gt-pos-ab' v-show='tl' src='../../assets/img/7.png' alt='' />

        <!-- 提梁机-->
        <img class='position-jq1 gt-pos-ab' v-show='jq' src='../../assets/img/8.png' alt='' />
        <img class='position-jq2 gt-pos-ab' v-show='jq' src='../../assets/img/9.png' alt='' />
        <!-- 智ne-->
        <img class='position-zl gt-pos-ab' v-show='zl' src='../../assets/img/10.png' alt='' />
        <!-- al监控-->
        <img class='position-al gt-pos-ab' v-show='al' src='../../assets/img/11.png' alt='' />
        <!-- 人员定位-->
        <!-- <img
            class="position-ry gt-pos-ab"
            v-show="ry"
            src="https://jjjt.oss-cn-shanghai.aliyuncs.com/122.jpg"
            width="1920px"
            height="950px"
            alt=""
        /> -->
        <div v-show='ry'>
            <div class='gt-pos-ab' @click='indexP(1)' style='top: 280px; left: 516px; z-index: 400'>
                <span class='scope_quyu'>钢筋绑扎区({{ mens[0] ? mens[0].workers.length : '0' }}人)</span>
                <img :src='indexPer == 1 ? b1 : b2' />
            </div>
            <div class='gt-pos-ab' @click='indexP(2)' style='top: 440px; left: 407px; z-index: 400'>
                <span class='scope_quyu'>钢筋绑扎区({{ mens[1] ? mens[1].workers.length : '0' }}人)</span>
                <img :src='indexPer == 2 ? b1 : b2' />
            </div>
            <div class='gt-pos-ab' @click='indexP(3)' style='top: 520px; left: 457px; z-index: 400'>
                <span class='scope_quyu'>制梁区({{ mens[2] ? mens[2].workers.length : '0' }}人)</span>
                <img :src='indexPer == 3 ? b1 : b2' />
            </div>
            <div class='gt-pos-ab' @click='indexP(4)' style='top: 470px; left: 870px; z-index: 400'>
                <span class='scope_quyu'>存梁区({{ mens[3] ? mens[3].workers.length : '0' }}人)</span>
                <img :src='indexPer == 4 ? b1 : b2' />
            </div>
            <div class='gt-pos-ab' @click='indexP(5)' style='top: 520px; left: 1110px; z-index: 400'>
                <span class='scope_quyu'>存梁区({{ mens[4] ? mens[4].workers.length : '0' }}人)</span>
                <img :src='indexPer == 5 ? b1 : b2' />
            </div>
            <div class='gt-pos-ab' @click='indexP(6)' style='top: 520px; left: 1420px; z-index: 800'>
                <span class='scope_quyu'>存梁区({{ mens[5] ? mens[5].workers.length : '0' }}人)</span>
                <img :src='indexPer == 6 ? b1 : b2' />
            </div>
            <div
                v-show='indexPer != 0'
                class='rydwc gt-pos-ab'
                :class='[
                    { indexP1: indexPer == 1 },
                    { indexP2: indexPer == 2 },
                    { indexP3: indexPer == 3 },
                    { indexP4: indexPer == 4 },
                    { indexP5: indexPer == 5 },
                    { indexP6: indexPer == 6 }
                ]'
            >
                <div style='padding: 10px 5px; display: flex; border-bottom: 1px solid #000000'>
                    <div style='flex: 1; margin-right: 3px'>
                        <img src='../../assets/img/tongzs/d.png' alt='' srcset='' />
                    </div>
                    <div style='flex: 4'>
                        <p>{{ rListInfo ? rListInfo.name : '' }}</p>
                        <p>{{ rListInfo ? rListInfo.nameR : '' }}</p>
                    </div>
                    <div style='flex: 2'>
                        <h2 style='line-height: 36px'>{{ mensData.length }}人</h2>
                    </div>
                </div>

                <div id='schart5'>
                    <div v-for='(item, index) in mensData' :key='index'>
                        <div style='flex: 1'>
                            <img src='../../assets/img/tongzs/t.png' alt='' srcset='' />
                        </div>
                        <div style='flex: 5'>
                            <p>{{ item.name }}</p>
                            <p>{{ item.companyName }}</p>
                        </div>
                        <!-- <div style="flex: 1">
                            <img src="../../assets/img/tongzs/dl.png" alt="" srcset="" width="14px" height="14px" />
                        </div> -->
                    </div>
                </div>
            </div>
        </div>
        <!-- 环境监测-->
        <img
            class='position-hj gt-pos-ab'
            v-show='hj'
            @mouseleave='hjjcBlock = false'
            @mousemove='hjjcBlock = true'
            @click="go('/jcjlb')"
            src='../../assets/img/13.png'
            alt=''
        />
        <div style='position: absolute; right: 0px; z-index: 400'>
            <div v-for='(item, index) in jinggao' :key='index' style='height: 120px'>
                <img src='../../assets/img/tongzs/gitff.gif' alt=''
                     style='position: relative; top: -60px; left: 145px' />
                <img src='../../assets/img/tongzs/dbh.png' alt='' />
                <div class='alertBox' style=''>
                    {{ item.type_name }}
                    <br />
                    <br />
                    <span>{{ item.uptime }}</span>
                </div>
            </div>
        </div>
        <!-- v-show="hjjcBlock" -->
        <div class='cont12' v-show='hjjcBlock'>
            <h2 class='sssjfx'>实时数据分析</h2>
            <div class='cell'>
                <div class='cell1'><img src='../../assets/img/pm1.png' alt='' /></div>
                <div class='cell1'>
                    <div class='cell4'>PM2.5</div>
                    <div class='cell3'>{{ monitoringData.data ? monitoringData.data.pm25 : '' }}ug/m³</div>
                </div>
            </div>
            <div class='cell'>
                <div class='cell1'><img src='../../assets/img/pm2.png' alt='' /></div>
                <div class='cell1'>
                    <div class='cell4'>PM10</div>
                    <div class='cell3'>{{ monitoringData.data ? monitoringData.data.pm10 : '' }}ug/m³</div>
                </div>
            </div>
            <div class='cell'>
                <div class='cell1'><img src='../../assets/img/pm3.png' alt='' /></div>
                <div class='cell1'>
                    <div class='cell4'>温度</div>
                    <div class='cell3'>{{ monitoringData.data ? monitoringData.data.tem : '' }}℃</div>
                </div>
            </div>
            <div class='cell'>
                <div class='cell1'><img src='../../assets/img/pm4.png' alt='' /></div>
                <div class='cell1'>
                    <div class='cell4'>湿度</div>
                    <div class='cell3'>{{ monitoringData.data ? monitoringData.data.hum : '' }}RH</div>
                </div>
            </div>
            <div class='cell'>
                <div class='cell1'><img src='../../assets/img/pm5.png' alt='' /></div>
                <div class='cell1'>
                    <div class='cell4'>TSP</div>
                    <div class='cell3'>{{ monitoringData.data ? monitoringData.data.tsp : '' }}ug/m³</div>
                </div>
            </div>

            <div class='cell'>
                <div class='cell1'><img src='../../assets/img/pm8.png' alt='' /></div>
                <div class='cell1'>
                    <div class='cell4'>风力</div>
                    <div class='cell3'>{{ monitoringData.data ? monitoringData.data.wp : '' }}级</div>
                </div>
            </div>
            <div class='cell'>
                <div class='cell1'><img src='../../assets/img/pm9.png' alt='' /></div>
                <div class='cell1'>
                    <div class='cell4'>风速</div>
                    <div class='cell3'>{{ monitoringData.data ? monitoringData.data.ws : '' }}m/s</div>
                </div>
            </div>
            <div class='cell'>
                <div class='cell1'><img src='../../assets/img/pm10.png' alt='' /></div>
                <div class='cell1'>
                    <div class='cell4'>风向</div>
                    <div class='cell3'>{{ monitoringData.data ? monitoringData.data.wd : '' }}</div>
                </div>
            </div>
            <div class='cell'>
                <div class='cell1'><img src='../../assets/img/pm15.png' alt='' /></div>
                <div class='cell1'>
                    <div class='cell4'>噪声</div>
                    <div class='cell3'>{{ monitoringData.data ? monitoringData.data.noise : '' }}db</div>
                </div>
            </div>
        </div>
        <!-- 智能监测-->
        <img class='position-tz gt-pos-ab' v-show='tz' src='../../assets/img/14.png' alt='' />
        <!-- 闸机-->
        <img class='position-zj gt-pos-ab' @click="go('/sssj')" v-show='zj' src='../../assets/img/15.png' alt='' />

        <div class='main'>
            <div class='tit'>IOT</div>
            <!-- @click="dianj(1)" -->
            <div class='tit1'>
                <div class='bigq'>
                    <div class='smallq'>
                        <div class='small'></div>
                    </div>
                </div>
                <img src='../../assets/img/st1.png' class='im_st' alt='' />
                <div class='wenz'>塔吊</div>
            </div>
            <div @click='dianj(4)' class='tit1'>
                <div class='bigq'>
                    <div class='smallq'>
                        <div class='small'></div>
                    </div>
                </div>
                <img src='../../assets/img/st4.png' class='im_st' alt='' />
                <div class='wenz'>监控</div>
            </div>
            <!--  @click="dianj(5)" -->
            <div class='tit1'>
                <div class='bigq'>
                    <div class='smallq'>
                        <div class='small'></div>
                    </div>
                </div>
                <img src='../../assets/img/st5.png' class='im_st' alt='' />
                <div class='wenz'>闸机</div>
            </div>
            <!-- @click="dianj(6)" -->
            <div class='tit1'>
                <div class='bigq'>
                    <div class='smallq'>
                        <div class='small'></div>
                    </div>
                </div>
                <img src='../../assets/img/st6.png' class='im_st' alt='' />
                <div class='wenz'>环境监测</div>
            </div>
            <!-- @click="dianj(7)"  -->
            <div class='tit1'>
                <div class='bigq'>
                    <div class='smallq'>
                        <div class='small'></div>
                    </div>
                </div>
                <img src='../../assets/img/st7.png' class='im_st' alt='' />
                <div class='wenz'>喷淋系统</div>
            </div>
            <!-- <div @click="dianj(8)" class="tit1">
                <div class="bigq">
                    <div class="smallq">
                        <div class="small"></div>
                    </div>
                </div>
                <img src="../../assets/img/st8.png" class="im_st" alt="" />
                <div class="wenz">配电柜</div>
            </div> -->
            <!-- @click="dianj(9)" -->
            <div class='tit1'>
                <div class='bigq'>
                    <div class='smallq'>
                        <div class='small'></div>
                    </div>
                </div>
                <img src='../../assets/img/st9.png' class='im_st' alt='' />
                <div class='wenz'>人员定位</div>
            </div>
            <!-- @click="dianj(10)" -->
            <div class='tit1'>
                <div class='bigq'>
                    <div class='smallq'>
                        <div class='small'></div>
                    </div>
                </div>
                <img src='../../assets/img/st10.png' class='im_st' alt='' />
                <div class='wenz'>车辆定位</div>
            </div>
            <!-- <div @click="dianj(11)" class="tit1">
                <div class="bigq">
                    <div class="smallq">
                        <div class="small"></div>
                    </div>
                </div>
                <img class="im_st" src="../../assets/img/st11.png" alt="" />
                <div class="wenz">报警信息</div>
            </div> -->
            <!-- <div @click="dianj(12)" class="tit1">
                <div class="bigq">
                    <div class="smallq">
                        <div class="small"></div>
                    </div>
                </div>
                <img src="../../assets/img/st12.png" class="im_st" alt="" />
                <div class="wenz">提梁机</div>
            </div> -->
            <!--  @click="go('/from', { id: 1 })" -->
            <div class='tit1'>
                <div class='bigq'>
                    <div class='smallq'>
                        <div class='small'></div>
                    </div>
                </div>
                <img src='../../assets/img/st13.png' class='im_st' alt='' />
                <div class='wenz'>智能监测</div>
            </div>
            <!-- @click="go('/spjk')" -->
            <div class='tit1'>
                <div class='bigq'>
                    <div class='smallq'>
                        <div class='small'></div>
                    </div>
                </div>
                <img src='../../assets/img/st14.png' class='im_st' alt='' />
                <div class='wenz'>AI算法</div>
            </div>
            <!--  @click="dianj(15)" -->
            <div class='tit1'>
                <div class='bigq'>
                    <div class='smallq'>
                        <div class='small'></div>
                    </div>
                </div>
                <img src='../../assets/img/st15.png' class='im_st' alt='' />
                <div class='wenz'>架桥机</div>
            </div>
        </div>
    </div>
</template>

<script>
import icon from '../../assets/img/car.png';
import echarts from 'echarts';
import Pagination from '@/components/Pagination';
import waves from '@/directive/waves';
import ajax from '@/utils/myajax';
import $ from 'jquery';

export default {
    components: { Pagination },
    directives: { waves },
    data() {
        return {
            pll: false,
            lmd: false,
            hh: false,
            jk: false,
            pl: false,
            cl: false,
            pd: false,
            tl: false,
            jq: false,
            zl: false,
            al: false,
            ry: false,
            hj: false,
            tz: false,
            clqShow: false,
            zj: false,
            cldw: false,
            value: '',
            regsValue: true,
            jsonData2: {
                deviceId: 22741,
                status: true
            },
            pdgDiv: false,
            // 喷淋信息的展示
            plxt: false,
            penlinlshi: '',
            count: 0,
            blockShow: false,
            jiance: false,
            jiance1: false,
            jiance2: false,
            decoder: null,
            token: '',
            monitoringData: '',
            // 控制环境监测
            hjjcBlock: false,
            setInt: '',
            jinggao: '',
            // 人员区域信息
            rListInfo: {},
            mensData: '',
            mens: '',
            // 人员定位
            indexPer: 0,
            b1:
                '',
            b2:
                '',

            // 喷淋总开关
            mainSwitch: '',
            mainTz: '',
            jsonData: {
                deviceId: 22741,
                fromDevice: true,
                regs: [
                    {
                        addr: 40001,
                        type: 'Bool'
                    }
                ]
            }
        };
    },
    created() {
        // // 人员定位
        // ajax('AiMonitoring/OpenApiTestClient', {}, data => {
        //     console.log('人员定位', data);
        //     this.mens = data.data;
        // });
        //
        // this.updateData();
        // this.getSta();
        // ajax('Environment/FindEnvironment', { deviceId: 21043007 }, data => {
        //     this.monitoringData = data;
        //     console.log('环境监测', this.monitoringData);
        // });
    },
    mounted() {
        // this.getStatus();
        // setTimeout(() => {
        //     console.log(localStorage.getItem('dwToken'));
        // }, 1000);
        //
        // ajax('Pedestal/FindPedestalStartStop', {}, data => {
        //     console.log('喷淋总开关', data);
        //     this.mainSwitch = data;
        // });
        // ajax('Pedestal/FindPedestalAll', {}, data => {
        //     console.log('台座数据', data);
        //     this.mainTz = data;
        // });
    },

    destroyed() {
        clearInterval(this.setInt);
    },
    methods: {
        propShow() {
            // 控制遮罩层
            console.log('a');
            this.clqShow = false;
        },
        // indexP  顶顶顶顶
        indexP(index) {
            this.indexPer = index;
            let mensData = '';
            switch (index) {
                case 1:
                    mensData = this.mens[0].workers;
                    this.rListInfo.name = '钢筋绑扎区1';
                    this.rListInfo.nameR = '绑扎区';
                    break;
                case 2:
                    mensData = this.mens[1].workers;
                    this.rListInfo.name = '钢筋绑扎区2';
                    this.rListInfo.nameR = '绑扎区';
                    break;

                case 3:
                    mensData = this.mens[2].workers;
                    this.rListInfo.name = '制梁区1';
                    this.rListInfo.nameR = '制梁区';
                    break;
                case 4:
                    mensData = this.mens[3].workers;
                    this.rListInfo.name = '存梁区1';
                    this.rListInfo.nameR = '存梁区';
                    break;
                case 5:
                    mensData = this.mens[4].workers;
                    this.rListInfo.name = '存梁区2';
                    this.rListInfo.nameR = '存梁区';
                    break;
                case 6:
                    mensData = this.mens[5].workers;
                    this.rListInfo.name = '存梁区3';
                    this.rListInfo.nameR = '存梁区';
                    break;
            }

            for (let key in mensData) {
                ajax(
                    'PersonnelLocation/FindPersonnelLocationByWorkerId_Map',
                    {
                        workerId: mensData[key].workerId
                    },
                    data => {
                        console.log('获取名字', data);
                        mensData[key].name = data;
                    }
                );
            }
            console.log('信息', mensData);
            this.mensData = mensData;
        },

        // 修改喷淋状态
        // /Pedestal/UpdatePedestalDp
        updateDataDp(bool, str) {
            ajax(
                'Pedestal/UpdatePedestalDp',
                {
                    start_state: bool,
                    start_variate: str
                },
                data => {
                    console.log('修改数据', data);
                }
            );
        },

        // /history/rest/1.0/status 获取上下线历史
        getStatus() {
            console.log('获取上下线历史');
            let user = '8a9043c338ec4dad866e890952dc94d4';
            let password = '1da19a1fdc794ad782acae7ba2bbbd9b';
            let tok = user + ':' + password;
            let hash = this.base64Encode(tok);
            let basic = 'Basic ' + hash;
            const date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
            let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
            let hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
            let minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
            let seconds = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
            console.log(year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds);

            let endTime = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
            var sdtime1 = new Date(endTime);
            var sdtime2 = sdtime1.setDate(sdtime1.getDate() - 1); //1天

            console.log('减去1天' + new Date(sdtime2).Format('yyyy-MM-dd hh:mm:ss'));
            let startTime = new Date(sdtime2).Format('yyyy-MM-dd hh:mm:ss');
            console.log('当前时间：' + endTime);
            $.ajax({
                url: 'https://openapi.devcld.com/history/rest/1.0/status',
                type: 'GET',
                dataType: 'json',
                // contentType: 'application/json',
                data: {
                    deviceId: 22741,
                    startTime: '2021-06-18 00:00:00',
                    endTime: endTime
                },
                beforeSend: function(xhr) {
                    xhr.setRequestHeader('Authorization', basic);
                },
                success: data => {
                    console.log('历史数据', data.data);
                    let arr = [];
                    let num = data.data.length - 5;
                    for (let i = num; i < data.data.length; i++) {
                        arr.push(data.data[i]);
                    }

                    console.log('喷淋历史：', arr);
                    this.penlinlshi = arr;
                }
            });
        },
        penlinD(value) {
            if (value == '制梁区') {
                console.log('喷淋点击');
                this.pll = !this.pll;
            } else if (value == '存梁区') {
                this.clqShow = !this.clqShow;
            }
        },

        getSta() {
            let user = '8a9043c338ec4dad866e890952dc94d4';
            let password = '1da19a1fdc794ad782acae7ba2bbbd9b';
            let tok = user + ':' + password;
            let hash = this.base64Encode(tok);
            let basic = 'Basic ' + hash;
            $.ajax({
                url: 'https://openapi.devcld.com/device/rest/1.0/device/readReg',
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json',
                data: JSON.stringify(this.jsonData),
                beforeSend: function(xhr) {
                    xhr.setRequestHeader('Authorization', basic);
                },
                success: data => {
                    this.regsValue = data.data.regs[0].value;
                    console.log('获取状态：' + this.regsValue);
                    this.value = this.regsValue;
                }
            });
            this.$forceUpdate();
        },
        kongzhikaiguan() {
            console.log('测试');
            //openapi.devcld.com/device/rest/1.0/device/online/filtered?ids=22741
            let user = '8a9043c338ec4dad866e890952dc94d4';
            let password = '1da19a1fdc794ad782acae7ba2bbbd9b';
            let tok = user + ':' + password;
            let hash = this.base64Encode(tok);
            let basic = 'Basic ' + hash;
            $.ajax({
                url: 'https://openapi.devcld.com/device/rest/1.0/device/online/filtered',
                type: 'GET',
                dataType: 'text',
                data: { ids: 22741 },
                beforeSend: function(xhr) {
                    xhr.setRequestHeader('Authorization', basic);
                },
                success: function(data) {
                    console.log(data);
                }
            });
        },
        // 切换状态
        change1() {
            console.log('当前状态' + this.value);

            if (this.value === 'true') {
                console.log('切换为fasle');
                this.jsonData2.status = false;
            } else if (this.value === 'false') {
                console.log('切换为true');
                this.jsonData2.status = true;
            }
            console.log(this.jsonData2.status);

            let user = '8a9043c338ec4dad866e890952dc94d4';
            let password = '1da19a1fdc794ad782acae7ba2bbbd9b';
            let tok = user + ':' + password;
            let hash = this.base64Encode(tok);
            let basic = 'Basic ' + hash;
            setTimeout(() => {
                $.ajax({
                    url: 'https://openapi.devcld.com/device/rest/1.0/device/reg/all',
                    type: 'POST',
                    dataType: 'json',
                    contentType: 'application/json',
                    data: JSON.stringify(this.jsonData2),
                    beforeSend: function(xhr) {
                        xhr.setRequestHeader('Authorization', basic);
                    },
                    success: data => {
                        console.log(data);
                    }
                });
                this.getSta();
            }, 1000);
        },
        // base64加密
        base64Encode(input) {
            var rv;
            rv = encodeURIComponent(input);
            rv = unescape(rv);
            rv = window.btoa(rv);
            return rv;
        },
        updateData() {
            let section_id = localStorage.getItem('section_id');
            ajax('AlarmInformation/FindAlarmInformation', { section_id: section_id }, data => {
                this.jinggao = data;
                console.log('警告', this.jinggao);
            });
            this.setInt = setInterval(() => {
                let section_id = localStorage.getItem('section_id');
                ajax('AlarmInformation/FindAlarmInformation', { section_id: section_id }, data => {
                    this.jinggao = data;
                    console.log('警告', this.jinggao);
                });
            }, 30000);
        },
        go(path, data) {
            this.$router.push({
                path: path,
                query: data
            });
        },

        onStop() {
            this.decoder.stop();
            console.log('结束');
        },
        showVideo(url) {
            this.blockShow = true;

            this.token = localStorage.getItem('vidiotoken');
            this.decoder = new EZUIKit.EZUIPlayer({
                id: 'playWind',
                autoplay: true,
                url: url,
                accessToken: this.token,
                decoderPath: '/static/ezui',
                width: 1275,
                height: 731
            });
            this.onStop();
        },
        clo() {
            this.blockShow = false;
            this.onStop();
        },
        dianj(count) {
            this.count = count;
            this.cut(count);
        },

        cut(count) {
            this.lmd = false;
            this.hh = false;
            this.jk = false;
            this.pl = false;
            this.cl = false;
            this.pd = false;
            this.tl = false;
            this.jq = false;
            this.zl = false;
            this.al = false;
            this.ry = false;
            this.hj = false;
            this.tz = false;
            this.zj = false;
            // 车
            this.cldw = false;
            switch (count) {
                case 1:
                    break;
                case 2:
                    this.lmd = true;
                    break;
                case 3:
                    this.hh = true;
                    break;
                case 4:
                    this.jk = true;
                    break;
                case 5:
                    this.zj = true;
                    break;
                case 6:
                    this.hj = true;
                    break;
                case 7:
                    this.pl = true;
                    break;
                case 8:
                    this.pd = true;
                    break;
                case 9:
                    this.ry = true;
                    break;
                case 10:
                    this.cl = true;
                    break;
                case 11:
                    this.zl = true;
                    break;
                case 12:
                    this.tl = true;
                    break;
                case 13:
                    this.tz = true;
                    break;
                case 14:
                    this.al = true;
                    break;
                case 15:
                    this.jq = true;
                    break;
            }
        }
    }
};
</script>

<style scoped>
#schart5 {
    height: 270px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.position {
    position: absolute;
}

.play {
    position: absolute;
    width: 1275px;
    height: 731px;
    border: 5px solid rgb(0, 252, 255);
    border-radius: 15px;
    z-index: 999;
    left: 250px;
}

#container {
    width: 1200px;
    height: 600px;
    position: absolute;
    left: 400px;
}

#playWind {
    width: 100%;
    align-content: center;
    text-align: center;
    border-radius: 5px;
    z-index: 999;
}

.position-lmd1 {
    top: 349px;
    left: 694px;
}

.position-lmd2 {
    top: 380px;
    left: 447px;
}

.position-lmd3 {
    top: 530px;
    left: 1427px;
}

.position-lmd4 {
    top: 351px;
    left: 1180px;
}

.position1 {
    position: absolute;
}

.position-hh4 {
    top: 274px;
    left: 1003px;
}

.position-hh1 {
    top: 188px;
    left: 496px;
}

.position-hh2 {
    top: 188px;
    left: 621px;
}

.position-hh3 {
    top: 186px;
    left: 735px;
}

.gt-pos-ab {
    position: absolute;
}

.position-pl555 {
    width: 1900px;
    height: 817px;
    position: absolute;
    left: 0px;
    bottom: 20px;
    z-index: 3;
}

.position-cl {
    top: 460px;
    left: 270px;
}

.position-pd2 {
    top: 300px;
    left: 375px;
}

.position-pd1 {
    top: 726px;
    left: 1249px;
}

.position-tl2 {
    top: 530px;
    left: 1047px;
}

.position-tl1 {
    top: 740px;
    left: 1390px;
}

.position-jq1 {
    top: 790px;
    left: 1317px;
}

.position-jq2 {
    top: 834px;
    left: 1317px;
}

.position-zl {
    top: 417px;
    left: 1502px;
}

.statsDiv {
    position: absolute;
    border-radius: 3px;
    color: rgb(255, 255, 255);
    display: inline-block;
    position: absolute;
    font-size: 16px;
    width: 148px;
    background: rgba(0, 18, 67, 0.5);
    border: 1px solid #ffffff;
    border-radius: 6px;
    left: 460px;
    top: 440px;
    z-index: 99999;

    font-size: 14px;
    padding: 10px 10px;
}

.position-al {
    top: 310px;
    left: 1519px;
}

.position-ry {
    top: -20px;
    /* left: 1034px; */
}

.position-hj {
    top: 200px;
    left: 456px;
}

.position-tz {
    top: 604px;
    left: 1712px;
}

.position-zj {
    top: 326px;
    left: 1571px;
}

.bigq {
    margin-left: 10px;
    margin-top: 7px;
    float: left;
    width: 16px;
    height: 16px;
    background-color: #ffffff;
    border-radius: 50%;
}

.wenz {
    width: 70px;
    margin-left: 10px;
    height: 20px;
    margin-top: 5px;
    line-height: 20px;
    text-align: left;
    float: left;
    color: #ffffff;
    font-size: 16px;
}

.smallq {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgb(3, 3, 3);
    position: relative;
    top: 2px;
    left: 2px;
}

.small {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ffffff;
    position: relative;
    top: 2px;
    left: 2px;
}

.cont {
    position: relative;
    padding-top: 64px;
    width: 100%;
    height: 100%;
    background: url(https://jjjt.oss-cn-shanghai.aliyuncs.com/maoming/zzzh.jpg) no-repeat;
    background-size: 100% 100%;
}

.main {
    width: 143px;
    height: 660px;
    margin-left: 56px;
    z-index: 1000;
    position: relative;
}

.tit1 {
    cursor: pointer;
    margin-top: 7px;
    width: 141px;
    height: 30px;
    border: 1px solid #14fffc;
    border-radius: 4px;
}

.tit {
    width: 142px;
    height: 56px;
    opacity: 1;
    background: url(../../assets/img/sy1.png) no-repeat;
    background-size: 100% 100%;
    width: 142px;
    line-height: 56px;
    opacity: 1;
    font-size: 28px;
    font-weight: Normal;
    text-align: center;
    color: #effeff;
}

.im_st {
    width: 20px;
    height: 20px;
    margin-left: 10px;
    margin-top: 5px;
    float: left;
}

.cont12 {
    position: absolute;
    left: 300px;
    width: 734px;
    height: 381px;
    top: 250px;
    background: url(../../assets/img/tongzs/bgsj.png) no-repeat;
    background-size: 100% 100%;
}

.cell3 {
    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(80, 204, 240, 1);
    width: 80px;
    height: 25px;
    line-height: 25px;
}

.cell4 {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: rgba(198, 246, 255, 1);
    width: 80px;
    height: 20px;
    line-height: 20px;
    margin-left: 5px;
}

.cell2 {
    margin-left: 15px;
    padding-top: 40px;
    float: left;
    height: 80px;
    width: 80px;
}

.cell1 img {
    margin-top: 3px;
}

.cell1 {
    margin-left: 20px;
    padding-top: 40px;
    float: left;
    height: 80px;
    width: 40px;
}

.cell {
    float: left;
    width: 170px;
    height: 100px;
    margin-left: 13px;
}

.alertBox {
    width: 130px;
    height: 57px;
    background: rgba(0, 18, 67, 0.5);
    border-radius: 3px;
    color: rgb(255, 255, 255);
    display: inline-block;
    position: relative;
    left: -40px;
    top: -60px;
    font-size: 14px;
    padding: 5px 10px;
    opacity: 0.8;
}

.loading-item {
    width: 1310px;
}

.penlin {
    position: absolute;

    text-align: center;
    top: 94px;
    left: 680px;
    z-index: 400;
    border: 1px solid #01f0ff;
    border-radius: 6px;
    background: rgba(0, 18, 67, 0.5);
}

.penlin > ul > li {
    line-height: 25px;
    font-size: 12px;
    padding: 3px 5px;
    opacity: 1;
    color: #ffffff;
}

.penlin > ul > li:nth-of-type(1) {
    font-size: 20px;
}

.penlin > ul > li:nth-child(odd) {
    line-height: 25px;
}

.penlin > ul > li:nth-child(even) {
    background: rgba(0, 18, 67, 1);
    line-height: 25px;
    border: 1px solid #01f0ff;
}

ul {
    list-style: none;
}

/* top相对增加40 left相对减少36 */
.indexP1 {
    top: 320px;
    left: 580px;
    z-index: 400;
}

.indexP2 {
    top: 480px;
    left: 271px;
    z-index: 400;
}

.indexP3 {
    top: 560px;
    left: 421px;
    z-index: 400;
}

.indexP4 {
    top: 510px;
    left: 834px;
    z-index: 400;
}

.indexP5 {
    top: 560px;
    left: 1074px;
    z-index: 400;
}

.indexP6 {
    top: 560px;
    left: 1384px;
    z-index: 400;
}

.sssjfx {
    margin-top: 30px;
    margin-left: 40px;
    /* opacity: 1; */
    color: linear-gradient(0deg, #82b5ea 0%, #52ffff 0%, #2aacfa 100%);
    font-size: 22px;
    font-family: Source Han Sans CN, Source Han Sans CN-Normal;
    font-weight: Normal;

    color: #a4e9ff;
    line-height: 30px;
}

.clqpl {
    background: url(../../assets/img/tongzs/clq.png) no-repeat;
    background-size: 100% 100%;
    height: 423px;
    width: 1188px;
    position: absolute;
    left: 421px;
    bottom: 72px;
    color: #ffffff;
    padding: 0 30px;
    z-index: 800;
}

.clqpl h2 {
    margin: 20px 0;
    text-align: center;
}

.clqpl1 {
    width: 186px;
    height: 112px;
    /* opacity: 0.5; */
    background: #001243;
    border: 1px solid #ffffff;
    border-radius: 6px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    float: left;
    margin: 0px 0px 9px 10px;
}

.clqpl1 h3 {
    margin: 10px;
}

.clqplAll {
    display: inline-block;
    width: 186px;
    height: 30px;
    /* opacity: 0.5; */
    background: #001243;
    border: 1px solid #ffffff;
    border-radius: 6px;
    text-align: center;
    margin: 0px 0px 9px 10px;
    line-height: 30px;
}

.scope_quyu {
    position: absolute;
    left: 7px;
    font-size: 12px;
    color: #ffffff;
}

/* 人员定位 */
.rydwc {
    width: 185px;
    height: 329px;
    opacity: 0.8;
    background: #ffffff;
    font-size: 12px;
    border-radius: 10px;
    box-shadow: 0px 8px 18px 3px rgba(19, 20, 20, 0.36);
}

#schart5 > div {
    padding: 10px 5px;
    display: flex;
    border-bottom: 1px solid #000000;
}

#schart5 > div > div:nth-of-type(1) {
    margin-right: 3px;
}

#schart5 > div > div:nth-of-type(3) img {
    position: relative;
    top: 12px;
    left: 5px;
}

/* 遮罩层 */
.prop {
    z-index: 99999;
    width: 1920px;
    height: 880px;
    background: rgba(0, 18, 67, 0.5);
}
</style>
